<template>
    <div v-if="detailsVisible">
        <BreadcrumbA></BreadcrumbA>
        <div style="width:100%; height: 100px; background: #b40909;">
            <div style="float: left; line-height: 100px;   font-size: 50px;   font-weight: bold;  color: yellow;  font-family: cursive;  width: 730px;">
                <img :src="$store.state.images.danghui" style="width:70px;height:70px;margin-top: -10px;  margin-left: 10px; margin-right: 10px;">电子党务系统
            </div>
            <div style="float: right; ">
                <img :src="$store.state.user.img" style="float: right;width:70px;height:70px;margin-top: 10px; margin-right: 30px;">
            </div>
        </div>
        <div class="leftitem">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item :index="item.title" v-for="(item,index)  in menuIndexRightitem" :key="index" style="width: 100%;">
                    <img  v-if="item.title!=''" :src="$store.state.images.hongqi"  style="width:45px;height:45px; margin-right: 10px;">{{item.title}}
                </el-menu-item>
            </el-menu>
        </div>
        <div class="rightitem">
            <el-row >
               <component :is="showcomponent.name" :ref='showcomponent.name' ></component> 
            </el-row> 
        </div>
        
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            detailsVisible: true,
            activeIndex: '',
            typeA:'',
            showAdd: false,

            menuIndexRightitem: [],


            //面包屑
            showjulink: false,
            showdwlink: false,
            componentsNeed:[],
            componentsNeedajax:[],
            showcomponent:{},

        }),
        components: {
        },
        mounted() {
            this.$Common.Config.this = this;
            if (this.GetUser() == false) {
                this.$router.push("/");
            }
            if (this.$store.state.Dw_DzbID.dwid == -1) {
                if (this.$store.state.user.operation == 0) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid == -1) {
                if (this.$store.state.user.operation <= 1) {
                    this.showAdd = true;
                }
            } else if (this.$store.state.Dw_DzbID.dzbid > -1 && this.$store.state.Dw_DzbID.dzbid > -1) {
                if (this.$store.state.user.operation <= 2) {
                    this.showAdd = true;
                }
            }
            if (this.$route.params) {
                if (this.$route.params.name) {
                    this.activeIndex = this.$route.params.name;
                }
                if (this.$route.params.menuIndexRightitem) {
                    this.menuIndexRightitem=this.$route.params.menuIndexRightitem;
                }
                if (this.$route.params.typeA) {
                    this.typeA=this.$route.params.typeA;
                }

                
            }
            if (this.$store.state.user.operation == 0) {
                this.showjulink = true;
                this.showdwlink = true;
            }
            if (this.$store.state.user.operation == 1) {
                this.showdwlink = true;
            }
            let _this=this;
            this.Getallgns(this.typeA)
            .then(function(value){
                _this.componentsNeedajax=value.gns;
                _this.GetcomponentsNeed();

                _this.handleSelect(_this.activeIndex);
            })
        },
        methods: {
            ...mapActions(['GetUser','Getallgns']),
            handleSelect(key) {
                this.FromIndexAndShowRight(key);
            },
            FromIndexAndShowRight(key) {
                let finded = this.componentsNeed.filter(function (value) {
                    return value.alias == key;
                });
                if(finded.length>0){
                    this.showcomponent=finded[0];
                    let _this = this;
                    setTimeout(function () {
                        let name=finded[0].name;
                        _this.$refs[name].$data.detailsVisible = false;//[0]
                    }, 100)
                    setTimeout(function () {
                        let name=finded[0].name;
                        if(finded[0].needType==true){
                            _this.$refs[name].$data.typeA = _this.typeA;//[0]
                            _this.$refs[name].$data.typeB = finded[0].alias;//[0]
                        }
                        _this.$refs[name].$data.showAdd = _this.showAdd;//[0]
                        _this.$refs[name].$data.detailsVisible = true;//[0]
                        _this.$refs[name].$data.Clear = true;//[0]
                    }, 200)
                }
            },

            GetcomponentsNeed()
            {
                for (let index = 0; index < this.menuIndexRightitem.length; index++) {
                    let element = this.menuIndexRightitem[index];
                    let finded=this.componentsNeedajax.filter(function(value){
                        return value.alias==element.title;
                    })
                    if(finded.length>0){
                        this.componentsNeed.push(finded[0]);
                    }
                    else{
                        console.log(element.title);
                    }
                    
                }
            },


        }
    }
</script>
<style scope>
    .leftitem {
        float: left;
        margin-bottom: 0;
        margin-right: 10px;
        height: 100%;
        padding: 0;
        position: relative;
        margin: 0 0 15px;

    }

    .rightitem {
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;
        padding-left: 5px;
    }

    .el-menu-demo {
        height: 900px;
        background: #e0e0e0;
        color: white;
        width: 230px;
        font-size: 14px;
    }

    .el-breadcrumb__inner {

        color: #fff;
    }

    .link {
        color: #fff;
    }

    .el-menu-item {
        font-size: 18px;
    }

    .el-breadcrumb__inner {

        color: #fff;
    }

    .link {
        color: #fff;
    }

    .el-menu-item {
        font-size: 18px;
    }
</style>